<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>JSTweener Test</title>
    <script language="JavaScript" src="../src/JSTweener.js"></script>
    <script language="JavaScript" src="utils.js"></script>
    <style>
        #test1 {
            position: absolute;
        }

        .testTemplate {
            position: absolute;
            top:100px;
            left:100px;
        }

        ul {
            font-size: 80%;
        }
    </style>
  </head>
  <body>
      <div id="test1" style="top:100px; height:0px;left:100px;width:0px;"></div>
      <h1>JSTweener Test</h1>
      <div id="result"></div>
  </body>
</html>
<script>
    is(JSTweener.toNumber('10px'), 10, 'toNumber');
    is(JSTweener.toNumber('#100000', '#'), 100000, 'toNumber prefix');
    is(JSTweener.toNumber('10pt',null , 'pt'), 10, 'toNumber suffix');

    var o1 = {x:100, y:100};

    JSTweener.addTween(o1, {
        time: 0.5,
        transition: 'linear',
        onStart: function() {
           ok(true, 'o1 start');
           testFunc.later(250)(function() {
               return (o1.x  > 105 && o1.y > 105 && o1.x  < 195 && o1.y < 195);
           }, 'o1 value');
        },
        onComplete: function() {
            ok(o1.x == 200 && o1.y == 200, 'o1 complete');
        },
        x: 200,
        y: 200
    });

    var test1 = document.getElementById('test1');
    JSTweener.addTween(test1.style, {
        time: 0.5,
        transition: 'linear',
        onStart: function() {
           ok(true, 'test1 start');
           testFunc.later(250)(function() {
               return (
               JSTweener.toNumber(test1.style.top)  > 105 && 
               JSTweener.toNumber(test1.style.left) > 105 && 
               JSTweener.toNumber(test1.style.top)  < 195 && 
               JSTweener.toNumber(test1.style.left) < 195
               );
           }, 'test1.style value');
        },
        onComplete: function() {
            ok(
            JSTweener.toNumber(test1.style.top) == 200 && 
            JSTweener.toNumber(test1.style.left) == 200, 'test1.style complete');
        },
        top: 200,
        left: 200
    });

    var createTestElement = function(idname) {
        var div = document.createElement('div');
        div.className = 'testTemplate';
        div.id = idname;
        document.body.appendChild(div);
        return div;
    }

    var test2 = createTestElement('test2');
    JSTweener.Utils.allSetStyleProperties(test2);

    is(test2.style.top, '100px', 'test2 allSetStyleProperties');

    JSTweener.addTween(test2.style, {
        time: 0.5,
        transition: 'linear',
        onStart: function() {
           ok(true, 'test2 start');
           testFunc.later(250)(function() {
               return (
               JSTweener.toNumber(test2.style.top)  > 105 && 
               JSTweener.toNumber(test2.style.left) > 105 && 
               JSTweener.toNumber(test2.style.top)  < 195 && 
               JSTweener.toNumber(test2.style.left) < 195
               );
           }, 'test2.style value');
        },
        onComplete: function() {
            ok(
            JSTweener.toNumber(test2.style.top) == 200 && 
            JSTweener.toNumber(test2.style.left) == 200, 'test2.style complete');
        },
        top: 200,
        left: 200
    });

    var test3 = createTestElement('test3');
    JSTweener.Utils.allSetStyleProperties(test3);

    test3.style.top = '100pt';
    test3.style.left = '100pt';

    JSTweener.addTween(test3.style, {
        time: 0.5,
        transition: 'linear',
        onStart: function() {
           ok(true, 'test3 start (suffix tests)');
           testFunc.later(250)(function() {
               return (
               JSTweener.toNumber(test3.style.top, null, 'pt')  > 105 && 
               JSTweener.toNumber(test3.style.left, null, 'pt') > 105 && 
               JSTweener.toNumber(test3.style.top, null, 'pt')  < 195 && 
               JSTweener.toNumber(test3.style.left, null, 'pt') < 195
               );
           }, 'test3.style value');
        },
        suffix: {
            top: 'pt',
            left: 'pt'
        },
        onComplete: function() {
            ok(
            test3.style.top == '200pt' && 
            test3.style.left == '200pt', 'test3.style complete');
        },
        top: 200,
        left: 200
    });

    var test4 = createTestElement('test4');
    JSTweener.Utils.allSetStyleProperties(test4);

    is(test4.style.top, '100px', 'test4 allSetStyleProperties');

    JSTweener.addTween(test4.style, {
        time: 0.5,
        transition: 'linear',
        onStart: function() {
           ok(true, 'test4(left) start');
           testFunc.later(250)(function() {
               return (
               JSTweener.toNumber(test4.style.left) > 105 && 
               JSTweener.toNumber(test4.style.left) < 195
               );
           }, 'test4(left).style value');
        },
        onComplete: function() {
            ok(JSTweener.toNumber(test4.style.left) == 200, 'test4(left).style complete');
        },
        left: 200
    });

    JSTweener.addTween(test4.style, {
        time: 0.5,
        transition: 'easeInSine',
        onStart: function() {
           ok(true, 'test4(top) start');
           testFunc.later(250)(function() {
               return (
               JSTweener.toNumber(test4.style.top) > 105 && 
               JSTweener.toNumber(test4.style.top) < 195
               );
           }, 'test4(top).style value');
        },
        onComplete: function() {
            ok(JSTweener.toNumber(test4.style.top) == 200, 'test4(top).style complete');
        },
        top: 200
    });

    var a5 = [{x:0, y:0},{x:100, y:100},{x:200, y:200}];

(function(){
    for (var i = 0;i<a5.length;i++) {
      var o = a5[i];
      JSTweener.addTween(o, {
          time: 0.5,
          transition: 'linear',
          delay:i,
          onComplete: function() {
              ok(true, 'test5 o' + this.delay + ' complete');
          },
          x: 200,
          y: 200
      });
    }
})();
</script>




























